<template>
	<view class="zhuanye">
		<view class="sousuo">
			<input class="in" confirm-type="search" placeholder="请输入需要搜索的内容" />
			<image class="ssimg" src="../../../static/lyl-img/zhuanyexiche_slices/搜索@3x.png" />
			<view class="ssjl">
				<text class="ssjl1">历史记录:</text>
				<text class="ssjl2" v-for="item in ssjl" :key="item.jl">
					{{item.jl}}
				</text>
			</view>
		</view>
		<view class="shaangpu" v-for="item in mendianData" :key="item.id">
			<view class="shaangpu1">
				<view class="name">{{item.name}}</view>
				<view class="jilu">{{item.jili}}m</view>
			</view>
			<view class="pingfen">
				<view class="xing" v-if="item.pingfen>0">
					<img src="../../../static/lyl-img/zhuanyexiche_slices/五星 拷贝.png" alt="" />
				</view>
				<view class="xing" v-if="item.pingfen>1">
					<img src="../../../static/lyl-img/zhuanyexiche_slices/五星 拷贝.png" alt="" />
				</view>
				<view class="xing" v-if="item.pingfen>2">
					<img src="../../../static/lyl-img/zhuanyexiche_slices/五星 拷贝.png" alt="" />
				</view>
				<view class="xing" v-if="item.pingfen>3">
					<img src="../../../static/lyl-img/zhuanyexiche_slices/五星 拷贝.png" />
				</view>
				<view class="fen">{{item.pingfen}}分 </view>
				<view class="num">销量:{{item.num}}</view>

			</view>
			<view class="jieshao">
				<view class="img">
					<img src="../../../static/lyl-img/zhuanyexiche_slices/2ce642584f5eb20ae36ca112ad680f5.png" />
				</view>
				<view class="jshao">
					<view class="zhou">营业时间:{{item.zhou}}</view>
					<view class="shijian">{{item.shijian}}</view>
					<view class="dizhi">{{item.dizhi}}</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				ssjl: [{
						jl: '菲菲汽车美容店'
					},
					{
						jl: '菲菲汽车美容店'
					}, {
						jl: '菲菲汽车美容店'
					}, {
						jl: '菲菲汽车美容店'
					}, {
						jl: '菲菲汽车美容店'
					}
				],
				mendianData: [{
						id: 0,
						name: '车百事汽车生活馆',
						pingfen: 4,
						num: 556,
						jili: 556,
						img: '../../../static/img/图层 1@3x.png',
						zhou: '周一到周五',
						shijian: '早上8:20-晚上22:00',
						dizhi: '河南省郑州市蓝鸥科技有限公司'
					},
					{
						id: 1,
						name: '车百事汽车生活馆',
						pingfen: 4,
						num: 556,
						jili: 556,
						img: '../../../static/img/图层 1@3x.png',
						zhou: '周一到周五',
						shijian: '早上8:20-晚上22:00',
						dizhi: '河南省郑州市蓝鸥科技有限公司'
					},
					{
						id: 2,
						name: '车百事汽车生活馆',
						pingfen: 4,
						num: 556,
						jili: 556,
						img: '../../../static/img/图层 1@3x.png',
						zhou: '周一到周五',
						shijian: '早上8:20-晚上22:00',
						dizhi: '河南省郑州市蓝鸥科技有限公司'
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.zhuanye {
		margin: 0;
		padding: 20rpx 40rpx;
		height: 400rpx;
		background-color: #3687fe;
		background-image: url("../../../static/img/图层 1@3x.png");
	}

	.sousuo {
		color: white;
		/* background-color: aliceblue; */
	}

	.in {
		background-color: white;
		padding-left: 30rpx;
		font-size: 20rpx;
		height: 80rpx;
		border-radius: 10rpx;
		border: 2rpx blue solid;
		border-radius: 40rpx;
	}

	.ssimg {
		position: absolute;
		right: 80rpx;
		top: 46rpx;
		height: 30rpx;
		width: 30rpx;
	}

	.ssjl {
		margin: 20rpx 0;
	}

	.ssjl1 {
		font-size: 30rpx;
	}

	.ssjl2 {
		margin: 0 20rpx;
		font-size: 24rpx;
	}

	.shaangpu {
		height: 260rpx;
		background-color: whitesmoke;
		border-radius: 20rpx;
		margin: 20rpx 0;
		padding: 20rpx;
		box-shadow: 0px -10px 0px 0px rgba(0, 0, 0, 0),
			/*上边阴影  透明*/
			-10px 0px 0px 0px rgba(0, 0, 0, 0),
			/*左边阴影  透明*/
			10px 0px 0px 0px rgba(0, 0, 0, 0),
			/*右边阴影  透明*/
			0px 10px 30px 0px rgba(0, 0, 0, 0.1);
		/*下边阴影 */
	}

	.shaangpu1 {
		height: 40rpx;
	}

	.pingfen {
		font-size: 22rpx;
		height: 20rpx;
		margin: 10rpx 0;
	}

	.xing {
		float: left;
		margin-right: 6rpx;
	}

	.xing img {
		height: 20rpx;
		width: 20rpx;
	}

	.fen {
		float: left;
		margin-right: 20rpx;
	}

	.num {
		float: left;
	}

	.jieshao {
		margin: 20rpx 0;
		font-size: 24rpx;
		height: 200rpx;
		clear: both;
	}

	.img img {
		height: 160rpx;
		width: 240rpx;
		float: left;
		margin-right: 30rpx;
		border-radius: 10rpx;
	}

	.jshao {
		padding: 10rpx 0;
		height: 140rpx;
		margin: 10rpx 6rpx;
	}

	.zhou {
		margin-top: 10rpx;
	}

	.shijian {
		margin: 10rpx 0;
	}

	.name {
		float: left;
	}

	.jilu {
		float: right;
	}
</style>